<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
})

const emits = defineEmits(['update:modelValue', 'cancel'])

function navigateToLogin() {
  uni.navigateTo({
    url: '/pages/login/index',
  })
  emits('update:modelValue', false)
}

function onCancel() {
  emits('update:modelValue', false)
  emits('cancel')
}

function onOverlayClick() {
  // 点击遮罩层时关闭弹窗
  emits('update:modelValue', false)
  emits('cancel')
}
</script>

<template>
  <wd-overlay :show="modelValue" :z-index="9998" @click="onOverlayClick">
    <div class="h-full w-full flex items-center justify-center" @click.stop>
      <div class="h-[650rpx] w-[520rpx] rounded-lg bg-white p-5 text-center">
        <div class="mb-4 h-40 w-full flex items-center justify-center text-blue-500">
          <img src="@/static/svg/no-login.svg" alt="login" class="h-35 w-35">
        </div>
        <p class="mb-6 text-gray-700">
          您未登录，请先登录后再进行操作
        </p>
        <div class="w-full flex flex-col gap-3">
          <wd-button
            type="primary"
            size="large"
            block
            :round="false"
            @click="navigateToLogin"
          >
            登录
          </wd-button>
          <wd-button
            type="info"
            size="large"
            block
            :round="false"
            @click="onCancel"
          >
            取消
          </wd-button>
        </div>
      </div>
    </div>
  </wd-overlay>
</template>
